<template>
  <view>
    <view class="custom-tabbar">
      <view 
        v-for="(item, index) in tabBarItems" 
        :key="index"
        :class="['tabbar-item', index === currentTabIndex ? 'active' : '']"
        @tap="handleTabClick(index)"
        v-if="index !== 2"
      >
        <text class="tabbar-icon iconfont">{{ item.icon }}</text>
        <text class="tabbar-text">{{ item.text }}</text>
      </view>
      
      <!-- 中间特殊按钮 -->
      <view class="tabbar-center-item" @tap="handleCenterAction">
        <view class="center-icon-wrapper">
          <text class="center-icon">+</text>
        </view>
        <text class="tabbar-text">{{ tabBarItems[2].text }}</text>
      </view>
    </view>
    
    <!-- 占位元素，防止内容被 TabBar 遮挡 -->
    <view class="tabbar-placeholder"></view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    // 当前选中的索引
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentTabIndex: this.current,
      tabBarItems: [
        { icon: '🏠', text: '首页', url: '/pages/index/index' },
        { icon: '🔍', text: '分类', url: '/pages/index/index' },
        { icon: '+', text: '发布', url: '' },
        { icon: '💬', text: '消息', url: '/pages/index/index' },
        { icon: '👤', text: '我的', url: '/pages/index/index' }
      ]
    };
  },
  watch: {
    current: {
      handler(newVal) {
        this.currentTabIndex = newVal;
      },
      immediate: true
    }
  },
  methods: {
    handleTabClick(index) {
      if (index === this.currentTabIndex) return;
      
      const item = this.tabBarItems[index];
      if (!item.url) return;
      
      this.currentTabIndex = index;
      this.$emit('tabChange', index);
      
      uni.switchTab({
        url: item.url,
        fail: () => {
          // 如果不是 tabBar 页面，使用 navigateTo
          uni.navigateTo({
            url: item.url
          });
        }
      });
    },
    
    handleCenterAction() {
      // 中间按钮的特殊处理
      this.$emit('centerClick');
      
      uni.showActionSheet({
        itemList: ['发布动态', '发布商品', '发起拼团'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              uni.navigateTo({ url: '/pages/publish/post' });
              break;
            case 1:
              uni.navigateTo({ url: '/pages/publish/product' });
              break;
            case 2:
              uni.navigateTo({ url: '/pages/publish/group' });
              break;
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
/* 自定义底部 TabBar 样式 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10rpx 0;
}

.tabbar-icon {
  font-size: 44rpx;
  margin-bottom: 6rpx;
  color: #8a8a8a;
}

.tabbar-text {
  font-size: 24rpx;
  color: #8a8a8a;
}

.tabbar-item.active .tabbar-icon,
.tabbar-item.active .tabbar-text {
  color: #2cc895; /* 活跃状态的颜色，与图片中的绿色按钮一致 */
}

.tabbar-center-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 10rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.center-icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background-color: #2cc895; /* 绿色圆形按钮 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rpx;
  position: relative;
  top: -20rpx;
  box-shadow: 0 4rpx 10rpx rgba(44, 200, 149, 0.3);
}

.center-icon {
  font-size: 60rpx;
  color: #ffffff;
  font-weight: bold;
}

.tabbar-placeholder {
  height: 110rpx;
  width: 100%;
}

/* 适配 iPhone X 及以上机型底部安全区域 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .custom-tabbar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .tabbar-placeholder {
    height: calc(110rpx + constant(safe-area-inset-bottom));
    height: calc(110rpx + env(safe-area-inset-bottom));
  }
}
</style> 